import { Layout, Form, Input, Button, Modal, message, notification } from "antd";
import { ExclamationCircleOutlined } from '@ant-design/icons';
import React, { useState } from "react";
import styles from "../styles/Header.module.css";

import { useSelector, useDispatch } from 'react-redux';


const useStore = () => {
  const userData = useSelector(state => state.userData)
  const loading = useSelector(state => state.loading)
  const collapsed = useSelector(state => state.collapsed)
  const dispatch = useDispatch()
  const logout = () => {
    dispatch({
      type: 'LOGOUT',
    })
  }

  const toggle = () => {
    dispatch({
      type: 'TOGGLE',
    })
  }
  const showLoading = () => {
    dispatch({
      type: 'SHOWLOADDING',
    })
  }

  const hideLoading = () => {
    dispatch({
      type: 'HIDELOADDING',
    })
  }


  return { userData, loading, collapsed, logout, toggle, showLoading, hideLoading }
}

const { Header, Footer, Sider, Content } = Layout;

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 6, span: 16 },
};

export default function TopHeader(props) {

  const { userData, loading, collapsed, logout, toggle, showLoading, hideLoading } = useStore()
  const [logoutVisible, setLogoutVisible] = useState(false);
  const [visible, setVisible] = useState(false);

  const [form] = Form.useForm();

  const handleOk = () => {
    // console.log("logout");

    // setLogoutVisible(false)
    // setUser({name:''})
    // cookie.remove("user");

    // props.callback()
  };

  const onFinish = (values) => {
    console.log("Success:", values);
    // message.info(JSON.stringify(values));
    notification['info']({
      message: 'Notification Title',
      description:
        JSON.stringify(values),
    });

    showLoading(); setTimeout(() => hideLoading(), 2000)
    setVisible(false);
    form.resetFields()
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
    // this.setState({ logoutVisible: false, visible: false });
  };

  return (
    <Header
      theme="light"
      style={{ height: "100px", borderBottom: "1px solid grey" }}
    >
      <img
        src="/imgs/header.jpg"
        alt="广西物业服务行业信用信息管理系统"
        style={{
          position: "absolute",
          width: "100%",
          height: "100px",
          left: 0,
        }}
      />
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          height: "100px",
          width: "100%",
        }}
      >
        <div className={styles.title}>
          <div className={styles.zh}>绩效管理信息系统</div>
        </div>
        <div className={styles.userInfo}>
          <span className={styles.split}>
            当前用户:{userData.name}
          </span>
          <span
            className={styles.split}
            style={{ cursor: "pointer" }}
            onClick={() => setVisible(true)}
          >
            修改密码
          </span>
          <span
            className={styles.split}
            style={{ cursor: "pointer" }}
            onClick={() => {
              Modal.confirm({
                icon: <ExclamationCircleOutlined />,
                content: '确定退出登录？',
                okText: '确定',
                cancelText: '取消',
                onOk() {
                  console.log('OK');
                  setLogoutVisible(false)

                  logout()


                  // props.callback()


                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }}
          >
            退出
          </span>
          <span style={{ cursor: "pointer" }}>反馈</span>
        </div>
      </div>
      {/* <Modal
        visible={logoutVisible}
        title="退出登录确认"
        onOk={handleOk}
        onCancel={() =>setLogoutVisible(false)}
        footer={[
          <Button
            key="back"
            onClick={() =>setLogoutVisible(false)}
          >
            取消
          </Button>,
          <Button
            key="submit"
            type="primary"
            onClick={handleOk}
          >
            确定
          </Button>,
        ]}
      >
        <p>确定退出登录？</p>
      </Modal> */}
      <Modal
        visible={visible}
        maskClosable={false}
        title="修改密码"
        // onOk={handleOk}
        onCancel={() => {setVisible(false); form.resetFields();}}
        footer={null}
      // footer={
      //   [
      //     <Button
      //       key="back"
      //       onClick={() => this.setState({ visible: false })}
      //     >
      //       取消
      //     </Button>,
      //     <Button
      //       key="submit"
      //       type="primary"
      //       onClick={this.handleOk.bind(this)}
      //     >
      //       确定
      //     </Button>,
      //   ]
      // }
      >
        <Form
          form={form}
          {...layout}
          name="basic"
          // initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="旧密码"
            name="oldPW"
            rules={[{ required: true, message: "请输入旧密码!" }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            label="新密码"
            name="password"
            rules={[{ required: true, message: "请输入新密码!" }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            label="确认密码"
            name="rePassword"
            dependencies={["password"]}
            rules={[
              { required: true, message: "请输入确认密码!" },
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject("密码不一致!");
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>

          {/* <Form.Item {...tailLayout} name="remember" valuePropName="checked">
              <Checkbox>记住账号信息</Checkbox>
            </Form.Item> */}

          <Form.Item {...tailLayout}>
            <Button
              style={{ marginRight: "20px" }}
              onClick={() => setVisible(false)}
            >
              取消
            </Button>

            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </Header>
  );
}
